Vue打包，并且部署配置成网站二级目录

发表于 2021-10-17 | 次阅读

字数统计: 226 字 | 阅读时长 ≈ 1 min

1.修改配置

在vue项目的根目录config/index.js中找build->assetsPublicPath 将”/“ 配置为”/test/“

1
2
3

build: {
  // assetsPublicPath: '/',
  assetsPublicPath: '/test/',

2.打包

vue 打包命令，在vue项目的根目录执行，生成dist 文件夹

1	npm run dev

3.部署子项目

将打包好的dist 放到子项目的nginx的html文件夹，并且重命名为test
子项目的nginx 配置如下

server {
    listen       8080;
    server_name  localhost;
    charset utf-8; 
    # rewrite ^(.*)$  https://www.vhxsl.com permanent;

    location / {
       root   /usr/share/nginx/html;
       index  index.html index.htm;
    }
 }

重启nginx
此时可测试子项目的nginx 是否可以看 http://127.0.0.1:8080/test

4.部署主项目

修改主nginx 的配置

location /test{
  try_files $uri @test;
}
location @test{
    proxy_pass http://127.0.0.1:8081$uri;
}

重启nginx
这样访问主项目的http://127.0.0.1:80/test 就会跳转到子项目的 http://127.0.0.1:8080/test